<template>
<div class="sys-header">
    <div class="admin-logo">
        <img src="static/img/logo_flaot_icon.png" class="zs-pic">
        <img src="static/img/logo.png">
    </div>
    <div class="data-overview row">
        <div class="col overview-item">
            <i class="icon"><img src="static/img/icon_data.png"></i>
            <div class="overview-number">
                <p class="number" id="number1">{{loginDeviceTotal}}</p>
                <p class="tips">今日登录设备总数(个)</p>
            </div>
        </div>
        <div class="col overview-item">
            <i class="icon"><img src="static/img/icon_data.png"></i>
            <div class="overview-number">
                <p class="number" id="number2">{{DoubtfulRecodDeviceTotal}}</p>
                <p class="tips">今日疑未备案设备数(个)</p>
            </div>
        </div>
        <div class="col overview-item">
            <i class="icon"><img src="static/img/icon_data.png"></i>
            <div class="overview-number">
                <p class="number" id="number3">{{DoubtFaultDeviceTotal}}</p>
                <p class="tips">今日疑似故障设备数(个)</p>
            </div>
        </div>
        <div class="col overview-item">
            <i class="icon"><img src="static/img/icon_data.png"></i>
            <div class="overview-number">
                <p class="number" id="number4">{{TripDistTotal}}</p>
                <p class="tips">今日骑行里程数(km)</p>
            </div>
        </div>
        <div class="col overview-item">
            <i class="icon"><img src="static/img/icon_data.png"></i>
            <div class="overview-number">
                <p class="number" id="number5">{{OnlineDeviceTotal}}</p>
                <p class="tips">当前在线设备数(个)</p>
            </div>
        </div>
    </div>
    <div class="admin-info">
        <img src="static/img/admin_header.png">
        <div class="user-name" v-on:mouseleave="hideSub">
            <a href="#" v-on:mouseenter="showSub">{{adminName}}</a>
            <div class="hide-sub-meun" v-if="hiddenSub">
                <a href="" @click="loginOut">注销</a>
            </div>
        </div>
    </div>
</div>
</template>

<script>
    export default {
        name: "headerTop",
        data() {
            return {
                adminName: "admin",
                loginDeviceTotal: 0,
                DoubtfulRecodDeviceTotal: 0,
                DoubtFaultDeviceTotal: 0,
                TripDistTotal: 0,
                OnlineDeviceTotal: 0,
                hiddenSub: false
            };
        },
        created: function() {
            //创建实例
        },
        mounted: function() {
            //挂载页面

            $("body").addClass("admin-data-view");
            var userInfo = localStorage.getItem("userInfo");
            if (userInfo) {
                userInfo = JSON.parse(userInfo);
                this.adminName = userInfo.userName;
            } else {
                this.$toLogin();
            }
            //初始化数据
            this.getOverviewData();
            setInterval(() => {
                this.getOverviewData();
            }, 300000);
        },
        methods: {

            //滚动数字
            numberJump(id, value) {   
                var num = $(id); 
                num.animate({
                    count: value
                }, {    
                    duration: 1200, //跳动持续时间  
                      step: function() {     
                        num.text(Math.round(this.count));    
                    }   
                });  
            },
            //获取总揽数据
            getOverviewData() {
                //获取缓存信息
                var userInfo = JSON.parse(localStorage.getItem("userInfo"));
                //初始化数字
                $.ajax({
                    url: this.global.DeviceOnlineStat + "?appKey=" + userInfo.appKey, //接口地址，配置在全局 golbal.vue文件
                    dataType: "json",
                    type: "GET",
                    context: this,
                    headers: {
                        "Content-Type": "application/json",
                    },
                    success: function(res) {
                        if (res.success == true && res.code == 200) {

                            

                            this.numberJump("#number1", res.data.currentDayOnlineCount);
                            this.numberJump("#number2", res.data.unregisterCount);
                            this.numberJump("#number3", res.data.breakdownCount);
                            this.numberJump("#number4", Math.round(res.data.toDayTotalDistance/1000));
                            this.numberJump("#number5", res.data.currentOnlineCount);
                        
                        } else {
                            console.log("获取图标信息失败");
                        }
                    },
                    complete: function(res) {},
                    error: function(res) {
                        console.log("获取图标信息失败");
                    }
                });

            },
            //退出登录
            loginOut() {
                localStorage.removeItem('userInfo');
                this.$showToast("退出登录");
                that.$toLogin();
            },
            showSub() {
                this.hiddenSub = true;
            },
            hideSub() {
                this.hiddenSub = false;
            }
        }
    };
</script>

<style scoped>
    .login-btn .btn-primary:hover {
        background: #ffacbd;
        border: 1px solid #ffacbd;
    }
</style>